<template>
    <div class="container">
        <div class="company-primary-detail">
            <header>
                <router-link to="/">首页 / </router-link>
                <router-link :to="{ path: '/partner/company', query: { id: id }}">企业管理 / </router-link>
                <router-link :to="{ path: '/partner/companyDetail', query: { id: id }}">{{name?name:'--'}}/ </router-link>
                基础信息
            </header>
            <div  v-if="messageList.length > 0" class="focus-pointer mb30">
                <div class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="detail-display">
                <div class="flex-box-align head-sec">
                    <div class="flex">基础信息</div>
                    <el-button type="primary" style="background-color: #ED7018;border-color: #ED7018;" @click="$router.push('/partner/companyPrimaryDetailEdit?id='+id+'&name='+detail.coreData.companyName)">编辑</el-button>
                </div>
                <div style="padding-top: 30px;">
                    <div class="flex-box-container">
                        <div class="flex" style="margin-right: 40px;">
                            <div class="whiteSpace mb30">
                                <span>企业名称：</span>
                                <span>{{detail.coreData?detail.coreData.companyName:'--'}}</span>
                            </div>
                            <!-- <div class="whiteSpace mb30">
                                <span>所属行业：</span>
                                <span>{{detail.coreData?detail.coreData.thirdIndustryDesc:'--'}}</span>
                            </div> -->
                            <div class="whiteSpace mb30">
                                <span>企业类型：</span>
                                <span>{{returnName(detail.coreData ? detail.coreData.userType : '')}}</span>
                            </div>
                            <div class="whiteSpace mb30">
                                <span>注册资本：</span>
                                <span>{{detail.coreData?detail.coreData.regMoney:'--'}}</span>
                            </div>
                            <div class="whiteSpace mb30">
                                <span>注册成立日期：</span>
                                <span>{{detail.coreData?detail.coreData.regdate.substr(0, 10):'--'}}</span>
                            </div>
                            <div class="whiteSpace mb30">
                                <span>注册所在地：</span>
                                <span>{{detail.licenceData? (detail.licenceData.regProvinceName + '/') : ''}}{{detail.licenceData ? (detail.licenceData.regCityName + '/') : ''}}{{detail.licenceData ? (detail.licenceData.regDistrictName + '/') : ''}}{{detail.licenceData ? detail.licenceData.regAddress : ''}}</span>
                            </div>
                            <div class="whiteSpace mb30">
                                <span>营业执照复印件：</span>
                                <span><img :src="detail.licenceData&&detail.licenceData.licenceFileInfo?detail.licenceData.licenceFileInfo.fileUrl:''" alt=""></span>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="whiteSpace mb30">
                                <span>社会统一信用号：</span>
                                <span>{{detail.licenceData ? detail.licenceData.unifiedCreditNumber : '--'}}</span>
                            </div>
                            <div class="whiteSpace mb30">
                                <span>法定代表人：</span>
                                <span>{{detail.licenceData ? detail.licenceData.legalCardId : '--'}}</span>
                            </div>
                            <div class="whiteSpace mb30">
                                <span>实际控制人：</span>
                                <span>{{detail.licenceData ? detail.licenceData.actualCardId : '--'}}</span>
                            </div>
                            <div class="whiteSpace mb30">
                                <span>经营地址：</span>
                                <span>{{detail.licenceData? (detail.licenceData.runProvinceName + '/') : ''}}{{detail.licenceData ? (detail.licenceData.runRegCityName + '/') : ''}}{{detail.licenceData ? (detail.licenceData.runRegDistrictName + '/') : ''}}{{detail.licenceData ? detail.licenceData.runRegAddress : ''}}</span>
                            </div>
                            <div class="whiteSpace mb30">
                                <span>企业员工人数：</span>
                                <span>{{detail.licenceData ? detail.licenceData.companyPeople : ''}}</span>
                            </div>
                            <div class="whiteSpace mb30">
                                <div>高层管理人员说明：</div>
                                <div class="desc-item" v-if="detail.licenceData">
                                    <!-- <div class="desc" v-for="(item,index) in detail.licenceData.contactDatas" :key="index">
                                        姓名：{{item.trueName}}  年龄：{{item.age}}  职业：{{item.positionDesc}}  简历介绍：{{item.introduction}}
                                    </div> -->
                                      <el-table
                                        :data="detail.licenceData.contactDatas"
                                        stripe
                                        style="width: 100%"
                                        border>
                                        <el-table-column
                                        prop="trueName"
                                        label="姓名"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                        prop="age"
                                        label="年龄"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                        prop="positionDesc"
                                        label="职位">
                                        </el-table-column>
                                        <el-table-column
                                        prop="introduction"
                                        label="简历介绍">
                                        </el-table-column>
                                    </el-table>
                                </div>

                            </div>
                            <div class="whiteSpace mb30">
                                <span>所属推荐机构：</span>
                                <span>{{detail.baseData && detail.baseData.parentChannelName ? detail.baseData.parentChannelName : ''}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {parseUrlParams} from "../../util";
    let CONSTANT = require('../../constant/constant.js'),
        common = require('../../common.js');
    import VDistpicker from 'v-distpicker';

    export default {
        data() {
            return {
                detail: {},
                province: "",
                city: "",
                id:'',
                name:'',
                district: "",
                imageUrl: require("../../images/upload-default.png"),
                userType:{
                    'company':'企业',
                    'bank':'资方',
                    'channel':'推荐机构'
                },
                num: 0,
                messageList: []
            }
        },
        mounted(){
            this.getMessage()
            setInterval( () => {
                this.getMessage()
            }, 120000)
            this.id = this.$router.currentRoute.query.id;
            this.name = this.$router.currentRoute.query.name;
            this.getDetail()
        },
        components: {
        },
        methods:{
            getMessage() {
                let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
                common.requestAjax(url, {}, {}, (data) => {
                    if(data.status == 200) {
                        this.messageList = data.data.bussData;
                        this.showMarquee(this.num)
                    }
                })
            },
            getDetail() {
                let url = CONSTANT.URL.COMPANY.COMPANYBASEDETAIL;
                common.requestAjax(url, {userId: parseUrlParams("id")}, {}, (data) => {
                    this.detail = data.data.bussData
                })
            },
            selectProvince(val) {
                this.province = val.value
            },
            selectCity(val) {
                this.city = val.value
            },
            selectArea(val) {
                this.district = val.value
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            returnName(str){
                return this.userType[str]
            },
            showMarquee:function (num) {
                if (!this.messageList[0]) return
                this.messageList.push(this.messageList[0]);
                var max = this.messageList.length;
                var that = this;
                let marqueetimer =  setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    }
</script>

<style lang="scss">
    .message {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;/*关键样式*/
        overflow: hidden;
    }
    .marquee_list{
        display: block;
        position: absolute;
        top:0;
        left: 0;
    }
    .marquee_top{transition: top 0.5s ;}/*关键样式*/
    .marquee_list li{
        height: 30px;/*关键样式*/
        line-height: 30px;/*关键样式*/
        font-size: 14px;
        padding-left: 20px;
        background-color: #fff;
        a {
            color: #333;
        }
    }
    .container {
        .mb30 {
            margin-bottom: 30px;
        }
        
        .company-primary-detail {
            header {
                margin: 19px 0;
                font-size: 14px;
                color: #333;
                a {
                    color: #999;
                }
            }
            .whiteSpace {
                white-space: nowrap;
                overflow: hidden;
                font-size: 14px;
                color: #666;
                span{
                    &:last-child{
                        color: #323232;
                    }
                }
                img{
                    width: 490px;
                    // height: 355px;
                    position: relative;
                    top: 40px;
                    // left: -150px;
                }
                span{
                    display: block;
                    float: left;
                }
                .desc-item{
                    margin-top: 10px;
                    display: block;
                    // float: left;
                    .desc{
                        margin-bottom: 10px;
                    }
                }
            }
            .focus-pointer {
                font-size: 14px;
                height: 70px;
                line-height: 70px;
                background-color: #fff;
                padding-left: 18px;
                white-space: nowrap;
            }
            .detail-display {
                background-color: #fff;
                padding: 23px;
                .head-sec {
                    padding-bottom: 8px;
                    border-bottom: 1px solid #e1e1e1;
                }
            }
            .top-manager {
                margin-bottom: 20px;
                span {
                    width: 80px;
                    display: inline-block;
                }
            }
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    }
</style>
